大家好！

今天要實作非同步請求的上傳進度條。
我們進入今天的主題吧！

程式碼

const xhr = new XMLHttpRequest();
Felix(xhr.upload).on('progress', function (e) {
    if (!e.lengthComputable) return;
    const progress = e.loaded / e.total * 100 + '%';
    Felix('#progress > div').width = progress;
});
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts');
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
xhr.send(JSON.stringify({ name: 'Felix', date: '2021-10-26' }));

實測

<div id="progress">
    <div></div>
</div>

範例連結製作中。

差不多也到尾聲了。
如果對文章有任何疑問，也歡迎在下方提問和建議！
我是 Felix，我們明天再見！